<div class="analysis-list-page">
    <!-- 页面标题 -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2>📊 数据分析 - 分析任务列表</h2>
        <div>
            <button class="btn btn-outline-info" onclick="window.location.href='/pages/analysis/dashboard.html'">
                <i class="fas fa-chart-pie me-1"></i> 数据仪表盘
            </button>
        </div>
    </div>

    <!-- 统计卡片 -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card text-center stat-card bg-light">
                <div class="card-body">
                    <div class="stat-number text-primary" id="totalAnalysis">0</div>
                    <div class="stat-label">总分析任务</div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-center stat-card bg-light">
                <div class="card-body">
                    <div class="stat-number status-completed" id="completedAnalysis">0</div>
                    <div class="stat-label">已完成</div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-center stat-card bg-light">
                <div class="card-body">
                    <div class="stat-number status-running" id="runningAnalysis">0</div>
                    <div class="stat-label">分析中</div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-center stat-card bg-light">
                <div class="card-body">
                    <div class="stat-number status-failed" id="failedAnalysis">0</div>
                    <div class="stat-label">失败</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 操作按钮 -->
    <div class="card mb-3">
        <div class="card-body">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <button class="btn btn-primary" onclick="analysisList.goToTaskList()">
                        <i class="fas fa-plus me-1"></i> 创建分析任务
                    </button>
                    <button class="btn btn-outline-secondary" id="refreshBtn">
                        <i class="fas fa-sync me-1"></i> 刷新
                    </button>
                </div>
                <div class="col-md-6 text-end">
                    <span class="text-muted">
                        <i class="fas fa-info-circle me-1"></i>
                        从采集任务列表创建分析任务
                    </span>
                </div>
            </div>
        </div>
    </div>

    <!-- 分析任务列表 -->
    <div class="card">
        <div class="card-header bg-primary text-white">
            <i class="fas fa-list me-2"></i>分析任务列表
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table id="analysisTable" class="table table-striped table-hover" style="width: 100%;">
                    <thead>
                        <tr>
                            <th style="width: 60px;">ID</th>
                            <th>采集任务</th>
                            <th>分析时间</th>
                            <th style="width: 100px;">状态</th>
                            <th style="width: 80px;">耗时(秒)</th>
                            <th style="width: 80px;">平台数</th>
                            <th style="width: 80px;">问句数</th>
                            <th style="width: 80px;">商品数</th>
                            <th style="width: 100px;">我方占比</th>
                            <th style="width: 180px;">操作</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<style>
    .stat-card {
        transition: transform 0.2s;
    }
    .stat-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    .stat-number {
        font-size: 32px;
        font-weight: bold;
        margin-bottom: 5px;
    }
    .stat-label {
        font-size: 14px;
        color: #6c757d;
    }
    .status-completed {
        color: #28a745;
    }
    .status-running {
        color: #17a2b8;
    }
    .status-failed {
        color: #dc3545;
    }
</style>

<script src="../../assets/js/pages/analysis-list.js"></script>
